import React from 'react';
import { TabBar } from 'antd-mobile';
import { render } from 'react-dom';
import styles from './style.less';
import {
    music,
    selectedMusic,
    find,
    findSelected
} from '@/assets';
import Found from '../find';
import IndexNav from './navBar'

const { Item } = TabBar
export default class Footer extends React.PureComponent {
    constructor(props) {
        super(props)
        this.state = {
            selectedTab: '1'
        }
    }

    render() {
        const { selectedTab } = this.state
        return (
            <div className={styles.wrapper}>
                <IndexNav />
                <TabBar
                >
                    <Item
                        key="1"
                        title="发现"
                        selected={selectedTab === '1'}
                        icon={{ uri: `${find}` }}
                        selectedIcon={{ uri: `${findSelected}` }}
                        onPress={() => this.setState({ selectedTab: '1' })}
                    >
                        <Found />
                    </Item>
                    <Item
                        key="2"
                        title="我的"
                        selected={selectedTab === '2'}
                        icon={{ uri: `${music}` }}
                        selectedIcon={{ uri: `${selectedMusic}` }}
                        onPress={() => this.setState({ selectedTab: '2' })}
                    >
                        我的页面
                    </Item>
                </TabBar>
            </div>
        )
    }
}